<script setup>
import { useData } from 'vitepress';

const { lang } = useData()
</script>

<template>
  <div class="hero">
    <span class="element left"/>
    <span class="element right"/>
    <div class="container">
      <svg class="name" fill="none" viewBox="0 0 298 42"><g><g><path d="M8.57892,1.1254421472549438L8.57892,20.518842147254944L22.595,1.1254421472549438L34.7064,1.1254421472549438L20.5113,20.127442147254943L35.8785,41.314942147254946L24.3856,41.314942147254946L14.13,26.586442147254942L8.57892,32.65404214725494L8.57892,41.314942147254946L0,41.314942147254946L0,1.1417189472549438L8.57892,1.1417189472549438L8.57892,1.1254421472549438Z" fill="#E6AC00" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M49.84568177978515,32.7028924369812L62.575761779785154,32.7028924369812L62.575761779785154,41.2986924369812L41.266761779785156,41.2986924369812L41.266761779785156,1.1253924369812012L49.84568177978515,1.1253924369812012L49.84568177978515,32.7028924369812Z" fill="#E6AC00" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M77.71506395751953,5.284654577083588C77.71506395751953,7.861714577083587,75.64767395751953,9.949484577083588,73.05934395751953,9.949484577083588C70.47102395751953,9.949484577083588,68.35474395751953,7.878044577083588,68.35474395751953,5.284654577083588C68.35474395751953,2.691254577083588,70.48726395751953,0.5708345770835876,73.05934395751953,0.5708345770835876C75.63142395751953,0.5708345770835876,77.71506395751953,2.707584577083588,77.71506395751953,5.284654577083588ZM76.03834395751953,11.074934577083587L77.21042395751954,11.074934577083587L77.21042395751954,12.249334577083587L77.21042395751954,40.12433457708359L77.21042395751954,41.298734577083586L76.03834395751953,41.298734577083586L69.91749395751953,41.298734577083586L68.74541995751953,41.298734577083586L68.74541995751953,40.12433457708359L68.74541995751953,12.249334577083587L68.74541995751953,11.074934577083587L69.91749395751953,11.074934577083587L76.03834395751953,11.074934577083587Z" fill="#E6AC00" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M110.76105076904297,26.015589474487307L110.76105076904297,41.298689474487304L102.45885076904297,41.298689474487304L102.45885076904297,26.015589474487307C102.45885076904297,22.313089474487306,100.48915076904296,18.545309474487304,96.17525076904298,18.545309474487304C92.02415076904296,18.545309474487304,88.71956076904297,21.921589474487305,88.71956076904297,26.015589474487307L88.71956076904297,41.298689474487304L80.41735076904297,41.298689474487304L80.41735076904297,10.781397474487305L88.71956076904297,10.781397474487305L88.71956076904297,12.135159474487304C90.90095076904296,10.960790474487304,93.48925076904297,10.226789474487305,96.17525076904298,10.226789474487305C104.59135076904298,10.226789474487305,110.76105076904297,16.865259474487303,110.76105076904297,26.015589474487307Z" fill="#E6AC00" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M146.8674281616211,30.63146984100342C143.4489281616211,38.44436984100342,136.3187281616211,43.500669841003415,127.80492816162109,41.592269841003414C120.17019816162109,39.91226984100342,114.5051481616211,32.49096984100342,115.30284406162109,24.286669841003416C117.15865816162109,4.615959841003418,144.4745281616211,5.398889841003418,146.42792816162108,24.792269841003417C139.4769281616211,26.92896984100342,132.4119281616211,28.90256984100342,125.33062816162109,30.974069841003416C129.3677281616211,35.753069841003416,136.5467281616211,33.84476984100342,138.9559281616211,28.445869841003418L146.8674281616211,30.63146984100342ZM123.4910881616211,24.89016984100342L137.0025281616211,20.89396984100342C134.59322816162108,14.451309841003418,122.1399181616211,18.15381984100342,123.4910881616211,24.89016984100342Z" fill="#E6AC00" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M181.36221813964843,25.8525L187.58081813964844,32.0832L184.43901813964845,35.2311C180.56461813964845,39.162,175.40421813964844,41.3476,169.85311813964844,41.2987C158.52312813964843,41.2987,149.27671813964844,32.0342,149.27671813964844,20.682C149.27671813964844,9.28079,158.52307813964845,0,169.85311813964844,0C175.35541813964844,0,180.62971813964845,2.18563,184.43901813964845,6.06758L187.58081813964844,9.15033L181.36221813964843,15.381L178.22041813964844,12.2983C175.97401813964842,9.99847,173.01121813964843,8.87302,169.86941813964845,8.80777C163.42301813964843,8.80777,158.08356813964843,14.1413,158.08356813964843,20.6656C158.08356813964843,27.1247,163.40671813964843,32.4746,169.86941813964845,32.4746C173.06001813964843,32.4746,175.99021813964845,31.2349,178.22041813964844,28.984L181.36221813964843,25.8525Z" fill="#E6AC00" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M223.24769169921876,26.015574672603606L223.24769169921876,41.29867467260361L214.94549169921873,41.29867467260361L214.94549169921873,26.015574672603606C214.94549169921873,22.31307467260361,212.97579169921875,18.545274672603608,208.66189169921876,18.545274672603608C204.51079169921874,18.545274672603608,201.20620169921875,21.921674672603608,201.20620169921875,26.015574672603606L201.20620169921875,41.29867467260361L192.90399169921875,41.29867467260361L192.90399169921875,0.7176746726036072L201.20620169921875,1.0601856726036072L201.20620169921875,12.135174672603608C203.38759169921875,10.960774672603607,205.97589169921875,10.226794672603607,208.66189169921876,10.226794672603607C217.07799169921876,10.226794672603607,223.24769169921876,16.865274672603608,223.24769169921876,26.015574672603606Z" fill="#E6AC00" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M249.50545485839842,10.846603688781737L257.74245485839845,10.846603688781737L257.74245485839845,41.526985688781735L249.50545485839842,41.526985688781735L249.50545485839842,40.059085688781735C247.25895485839843,41.29868568878174,244.73575485839842,41.967485688781736,242.04975485839844,41.967485688781736C233.35685485839844,41.967485688781736,226.29185485839844,34.88858568878174,226.29185485839844,26.17868568878174C226.29185485839844,17.517725688781738,233.35685485839844,10.438885688781738,242.04975485839844,10.438885688781738C244.73575485839842,10.438885688781738,247.25895485839843,11.107630688781738,249.50545485839842,12.298325688781738L249.50545485839842,10.846603688781737ZM249.50545485839842,26.19498568878174C249.50545485839842,22.10098568878174,246.13565485839842,18.724695688781736,242.04975485839844,18.724695688781736C237.89865485839843,18.724695688781736,234.59406485839844,22.10098568878174,234.59406485839844,26.19498568878174C234.59406485839844,30.354185688781737,237.89865485839843,33.665285688781736,242.04975485839844,33.665285688781736C246.13565485839842,33.665285688781736,249.50545485839842,30.354185688781737,249.50545485839842,26.19498568878174Z" fill="#E6AC00" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M277.0980325683594,10.455163955688477L278.2700325683594,10.455163955688477L278.2700325683594,18.382143955688477L277.0980325683594,18.382143955688477L276.64223256835936,18.382143955688477C270.8632425683594,18.447393955688476,270.24463256835935,24.221363955688474,270.24463256835935,26.700563955688477L270.24463256835935,40.12436395568848L270.24463256835935,41.298663955688475L261.7796325683594,41.298663955688475L261.7796325683594,40.12436395568848L261.7796325683594,12.249353955688477L261.7796325683594,10.846654955688477L270.24463256835935,10.846654955688477L270.24463256835935,12.249353955688477L270.24463256835935,12.298283955688477C272.14923256835937,11.074977955688476,274.46083256835936,10.455163955688477,277.0980325683594,10.455163955688477Z" fill="#E6AC00" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M296.8279291503906,7.584465771102905L298.0000291503906,7.584465771102905L298.0000291503906,15.446265771102905L296.8279291503906,15.446265771102905L293.45822915039065,15.446265771102905L293.45822915039065,25.232665771102905L293.45822915039065,33.27376577110291C293.45822915039065,34.0567657711029,294.74422915039065,34.1708657711029,295.31402915039064,34.1708657711029C295.8186291503906,34.1708657711029,296.1604291503906,34.12196577110291,296.43722915039064,34.05666577110291L298.0000291503906,33.5021657711029L298.0000291503906,41.03766577110291L297.2186291503906,41.3801657711029C296.1604291503906,41.7716657711029,294.97212915039063,41.99996577110291,293.6210291503906,41.99996577110291C288.6233691503906,41.99996577110291,284.9769291503906,38.346465771102906,284.9769291503906,33.2900657711029L284.9769291503906,15.478765771102905L282.8444091503906,15.478765771102905L281.6886291503906,15.478765771102905L281.6886291503906,7.617015771102905L282.8607091503906,7.617015771102905L284.9932291503906,7.617015771102905L284.9932291503906,2.283435771102905L284.9932291503906,1.1090657711029053L293.45822915039065,1.1090657711029053L293.45822915039065,2.283435771102905L293.45822915039065,7.617015771102905L296.8279291503906,7.617015771102905L296.8279291503906,7.584465771102905Z" fill="#E6AC00" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
      <p class="text">
        {{ lang === 'zh-CN' ? '可高度自定义的专业级轻量金融图表' : 'Highly customizable professional lightweight financial chart' }}
      </p>
      <p class="tagline">
        {{ lang === 'zh-CN' ? '简单易用，轻量流畅，适用场景丰富的 Web 前端金融图表。' : 'Easy to use, lightweight and smooth, suitable for web front-end financial chart with rich scenarios.' }}
      </p>
      <div class="actions">
        <a class="action brand" rel="noreferrer" :href="lang === 'zh-CN' ? '/guide/quick-start' : '/en-US/guide/quick-start'">{{ lang === 'zh-CN' ? '快速开始' : 'Getting Started' }}</a>
        <a class="action alt" rel="noreferrer" href="https://github.com/klinecharts/KLineChart">
          <svg viewBox="0 0 64 64"><path fill="currentColor" d="M32 0C14 0 0 14 0 32c0 21 19 30 22 30c2 0 2-1 2-2v-5c-7 2-10-2-11-5c0 0 0-1-2-3c-1-1-5-3-1-3c3 0 5 4 5 4c3 4 7 3 9 2c0-2 2-4 2-4c-8-1-14-4-14-15q0-6 3-9s-2-4 0-9c0 0 5 0 9 4c3-2 13-2 16 0c4-4 9-4 9-4c2 7 0 9 0 9q3 3 3 9c0 11-7 14-14 15c1 1 2 3 2 6v8c0 1 0 2 2 2c3 0 22-9 22-30C64 14 50 0 32 0"/></svg>
          &nbsp;&nbsp;Github
        </a>
      </div>
    </div>
  </div>
</template>

<style scoped>
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);
  padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px;
  background: var(--vp-home-hero-bg);
}

.element {
  position: absolute;
  opacity: 0.1;
  background-color: var(--vp-c-indigo-1);
}

.element.left {
  left: 0;
  top: 100px;
  width: 46px;
  height: 46px;
}

.element.right {
  right: 0;
  bottom: 60px;
  width: 80px;
  height: 80px;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  max-width: 1080px;
}

.name {
  height: 22px;
}

.text {
  max-width: 460px;
  line-height: 36px;
  font-size: 30px;
  font-weight: 700;
  padding: 10px 0;
  white-space: pre-wrap;
  max-width: 80%;
}

.tagline {
  max-width: 392px;
  line-height: 26px;
  font-size: 16px;
  font-weight: 500;
  white-space: pre-wrap;
  color: var(--vp-c-text-2);
  max-width: 100%;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 32px;
}

.action {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 4px 16px;
  border-radius: 99999px;
  cursor: pointer;
  border: solid 1px;
}

.action.brand {
  background-color: var(--vp-c-indigo-1);
  border-color: var(--vp-c-indigo-1);
  color: #fff;
}

.action.brand:hover {
  background-color: var(--vp-c-indigo-2);
  border-color: var(--vp-c-indigo-2);
}

.action.alt {
  border-color: var(--vp-c-indigo-1);
  color: var(--vp-c-indigo-1);
}

.action.alt:hover {
  border-color: var(--vp-c-indigo-2);
  color: var(--vp-c-indigo-2);
}

.action.alt svg {
  width: 14px;
  height: 14px;
}

@media (min-width: 640px) {
  .hero {
    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px;
  }
  .element.left {
    top: 120px;
    width: 70px;
    height: 70px;
  }
  .element.right {
    width: 136px;
    height: 136px;
    bottom: 60px;
  }
  .name {
    height: 34px;
  }
  .text {
    line-height: 50px;
    font-size: 44px;
    padding: 14px 0 26px 0;
    max-width: 70%;
  }
  .tagline {
    max-width: 576px;
    font-size: 20px;
  }
  .actions {
    gap: 20px;
    padding-top: 40px;
  }
  .action {
    padding: 6px 20px;
  }

  .action.alt svg {
    width: 16px;
    height: 16px;
  }
}

@media (min-width: 960px) {
  .hero {
    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 100px) 64px 100px 64px;
  }
  .element.left {
    top: 150px;
    width: 90px;
    height: 90px;
  }
  .element.right {
    bottom: 100px;
    width: 164px;
    height: 164px;
  }
  .name {
    height: 40px;
  }
  .text {
    line-height: 60px;
    padding: 20px 0 34px 0;
    font-size: 54px;
    max-width: 700px;
  }
  .tagline {
    font-size: 24px;
    max-width: 660px;
  }
  .actions {
    padding-top: 48px;
    font-size: 16px;
  }
}
</style>